<!DOCTYPE html>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions'%>
<%@ taglib uri="http://www.springframework.org/security/tags"
	prefix="sec"%>
<%@ page isELIgnored="false"%>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>


<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery.validate.js"></script>
<script type="text/javascript" src="../jquery/jquery.tools.min.js"></script>
<script type="text/javascript" src="../app/open/signup.js"></script>
<!--  <script type="text/javascript" src="../app/Application.js"></script>-->

<!-- Le styles -->
<link href="../resources/css/bs/bootstrap.css" rel="stylesheet">
<link href="../resources/css/bs/numreceipt.css" rel="stylesheet">
<link rel="stylesheet"
	href="../resources/css/jqueryui/humanity/jquery-ui-1.8.17.custom.css">
<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>

<script>
<!--$('.dropdown-toggle').dropdown(); -->
	$('#example').popover(animation);
	$('.typeahead').typeahead();
</script>

</head>
<body>
	<div class="container">
		<div class="row">

			<div class="span4">
				<h2>Signup page</h2>

				<sf:form id="signupForm" modelAttribute="appUser">
					<sf:input type="email" id="userId" class="span3" required="true"
						placeholder="User id(Email)" path="userId" />
					<sf:password id="password" class="span3" required="true"
						path="password" placeholder="Password" />
					<div class="input-prepend">
						<span class="add-on singleline">Male&nbsp;&nbsp;&nbsp;&nbsp;</span><input
							class="input-age" id="input-prepend" size="3" type="text" max="3"
							placeholder="Age" data-provide="typeahead" data-items="10"
							data-source="[&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;,&quot;8&quot;,&quot;9&quot;,&quot;10&quot;,&quot;11&quot;,&quot;12&quot;,&quot;13&quot;,&quot;14&quot;,&quot;15&quot;,&quot;16&quot;,&quot;17&quot;,&quot;18&quot;,&quot;19&quot;,&quot;20&quot;,&quot;21&quot;,&quot;22&quot;,&quot;23&quot;,&quot;24&quot;,&quot;25&quot;,&quot;26&quot;,&quot;27&quot;,&quot;28&quot;,&quot;29&quot;,&quot;30&quot;,&quot;31&quot;,&quot;32&quot;,&quot;33&quot;,&quot;34&quot;,&quot;35&quot;,&quot;36&quot;,&quot;37&quot;,&quot;38&quot;,&quot;39&quot;,&quot;40&quot;,&quot;41&quot;,&quot;42&quot;,&quot;43&quot;,&quot;44&quot;,&quot;45&quot;,&quot;46&quot;,&quot;47&quot;,&quot;48&quot;,&quot;49&quot;,&quot;50&quot;,&quot;51&quot;,&quot;52&quot;,&quot;53&quot;,&quot;54&quot;,&quot;55&quot;,&quot;56&quot;,&quot;57&quot;,&quot;58&quot;,&quot;59&quot;,&quot;60&quot;,&quot;61&quot;,&quot;62&quot;,&quot;63&quot;,&quot;64&quot;,&quot;65&quot;,&quot;66&quot;,&quot;67&quot;,&quot;68&quot;,&quot;69&quot;,&quot;70&quot;,&quot;71&quot;,&quot;72&quot;,&quot;73&quot;,&quot;74&quot;,&quot;75&quot;,&quot;76&quot;,&quot;77&quot;,&quot;78&quot;,&quot;79&quot;,&quot;80&quot;,&quot;81&quot;,&quot;82&quot;,&quot;83&quot;,&quot;84&quot;,&quot;85&quot;,&quot;86&quot;,&quot;87&quot;,&quot;88&quot;,&quot;89&quot;,&quot;90&quot;,&quot;91&quot;,&quot;92&quot;,&quot;93&quot;,&quot;94&quot;,&quot;95&quot;,&quot;96&quot;,&quot;97&quot;,&quot;98&quot;,&quot;99&quot;,&quot;100&quot;]"><span
							class="span3"> <B>or</B> <BR> </span>
					</div>
					<div class="input-prepend">
						<span class="add-on">Female</span><input class="input-age"
							id="input-prepend" size="3" type="text" max="3" placeholder="Age"
							data-provide="typeahead" data-items="10"
							data-source="[&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;,&quot;8&quot;,&quot;9&quot;,&quot;10&quot;,&quot;11&quot;,&quot;12&quot;,&quot;13&quot;,&quot;14&quot;,&quot;15&quot;,&quot;16&quot;,&quot;17&quot;,&quot;18&quot;,&quot;19&quot;,&quot;20&quot;,&quot;21&quot;,&quot;22&quot;,&quot;23&quot;,&quot;24&quot;,&quot;25&quot;,&quot;26&quot;,&quot;27&quot;,&quot;28&quot;,&quot;29&quot;,&quot;30&quot;,&quot;31&quot;,&quot;32&quot;,&quot;33&quot;,&quot;34&quot;,&quot;35&quot;,&quot;36&quot;,&quot;37&quot;,&quot;38&quot;,&quot;39&quot;,&quot;40&quot;,&quot;41&quot;,&quot;42&quot;,&quot;43&quot;,&quot;44&quot;,&quot;45&quot;,&quot;46&quot;,&quot;47&quot;,&quot;48&quot;,&quot;49&quot;,&quot;50&quot;,&quot;51&quot;,&quot;52&quot;,&quot;53&quot;,&quot;54&quot;,&quot;55&quot;,&quot;56&quot;,&quot;57&quot;,&quot;58&quot;,&quot;59&quot;,&quot;60&quot;,&quot;61&quot;,&quot;62&quot;,&quot;63&quot;,&quot;64&quot;,&quot;65&quot;,&quot;66&quot;,&quot;67&quot;,&quot;68&quot;,&quot;69&quot;,&quot;70&quot;,&quot;71&quot;,&quot;72&quot;,&quot;73&quot;,&quot;74&quot;,&quot;75&quot;,&quot;76&quot;,&quot;77&quot;,&quot;78&quot;,&quot;79&quot;,&quot;80&quot;,&quot;81&quot;,&quot;82&quot;,&quot;83&quot;,&quot;84&quot;,&quot;85&quot;,&quot;86&quot;,&quot;87&quot;,&quot;88&quot;,&quot;89&quot;,&quot;90&quot;,&quot;91&quot;,&quot;92&quot;,&quot;93&quot;,&quot;94&quot;,&quot;95&quot;,&quot;96&quot;,&quot;97&quot;,&quot;98&quot;,&quot;99&quot;,&quot;100&quot;]">
					</div>
					<button type="submit" id="butSignup" class="btn btn-primary ">Signup</button>
					<button type="reset" id="resetButton" class="btn">Reset</button>
					</input>
				</sf:form>
			</div>
		</div>
		<HR>
	</div>
	<!-- /container -->


	<script src="../jquery/bs/bootstrap-dropdown.js"></script>
	<script src="../jquery/bs/bootstrap-tooltip.js"></script>
	<script src="../jquery/bs/bootstrap-popover.js"></script>
	<script src="../jquery/bs/bootstrap-button.js"></script>
	<script src="../jquery/bs/bootstrap-typeahead.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){		
		$("#signupForm").validator().submit(function f(event){
			 if (!event.isDefaultPrevented()) {
				 $.ajax({ 
					 type: 'POST', 
					 url: "../open/createUser.json", 
					 data: $("#signupForm").serialize(), 
					 datatype: "json", 
					 success: function (response) {
						 alert(response.message);
					 }, 
					 error:	 function(response, ajaxOptions, thrownError) {
						 alert("Some problem in saving the record : " + response.message);
					 }
				});
				 event.preventDefault();
			 }
			 else {
				 event.preventDefault();
				 //alert("Please correct the below form errors");
			 }
		});
	});
	</script>
</body>
</html>